<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
[@common.cssRef url="/common/layui/css/layui.css"/]
[@common.cssRef url="/common/progressive-image/index.css"/]
<title>登录页</title> 
</head>
<style>
.login-page {
	/* background-image: url([@common.ctx/]/base/login/img/3.jpg); */
	/* 背景图垂直、水平均居中 */
	background-position: center center;
	/* 背景图不平铺 */
	background-repeat: no-repeat;
	/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
	background-attachment: fixed;
	/* 让背景图基于容器大小伸缩 */
	background-size: cover;
	/* 设置背景颜色，背景图加载过程中会显示背景色 */
	background-color: #e5d8e4c9;
}

.login-form {
	/*  text-align: center;  */
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	/*  float: left; */
	width: 400px;
	background: #e0ebded4;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, .3);
}

.login-form .login-title {
	margin-top: 10px;
	font-size: 20px;
	margin-bottom: 20px;
	text-align: center;
	color: #444444;
}

.inputdiv {
	display: flex;
	border: 1px solid #D2D2D2 !important;
	background-color: #fff;
	height: 38px;
	line-height: 38px;
	padding: 0px 19px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	/* border-radius: 19px; */
}

.layui-input {
	border-style: none;
}

.captcha-input {
	display: flex;
	border: 1px solid #D2D2D2 !important;
	background-color: #fff;
	height: 38px;
	line-height: 38px;
	padding: 0px 19px;
	width: 180px;
	margin-left: 30px;
	margin-right: auto;
}

.captcha-img {
	margin-top: -39px;
	margin-right: 30px;
	width: 115px;
	height: 38px;
	cursor: pointer;
	float: right;
	width: 115px;
}

.layui-form-item .layui-form-checkbox[lay-skin=primary] {
	float: left;
	margin-left: 30px;
}

.forget-pwd {
	float: right;
	margin-top: 10px;
	margin-right: 30px;
}

.login-btn {
	width: 340px;
	margin-left: 30px;
	margin-bottom: 20px;
	background: #a76491cf;
}
</style>
<body class="login-page">
<main id="app">
<!--     <div class="progressive full">
      <img class="preview lazy" data-src=""  src="" />
      <img class="preview lazy" data-src="[@common.ctx/]/base/login/img/3.jpg" src="[@common.ctx/]/base/login/img/3.jpg" />
    </div> -->
	<div class="login-form">
		<form id="loginForm" class="layui-form">
			<h1 class="login-title">eh-admin</h1>
			<div class="layui-form-item">
				<div class="inputdiv">
					<i class="layui-icon layui-icon-username"></i> <input
						class="layui-input" type="text" name="userCode" id="username"
						placeholder="用户名">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="inputdiv">
					<i class="layui-icon layui-icon-password"></i> <input
						class="layui-input" type="password" name="userPwd" id="password"
						placeholder="密码">
				</div>
			</div>
			[#if captchaSwitch == 'ON']
			<div class="layui-form-item">
				<div class="captcha-input">
					<i class="layui-icon layui-icon-vercode"></i> <input
						class="layui-input" type="text" name="validcode"
						autocomplete="off" placeholder="验证码">
				</div>
				<img id="verifycode" class="captcha-img" />
			</div>
			[/#if]
			<div class="layui-form-item">
				[#if remembermeSwitch == 'true'] 
				<input type="checkbox" name="rememberMe" title="记住我" lay-skin="primary"> 
				[/#if] 
				<a class="forget-pwd" href="javascript:alert('请联系超级管理员！')">忘记密码?</a>
			</div>
		</form>
		<button id="login" class="layui-btn layui-btn-fluid login-btn">登录</button>
	</div>
 </main>
</body>
[#include "/common/commonJS.html"] 
[@common.jsRef url="/base/login/js/login.js"/]
[@common.jsRef url="/common/progressive-image/index.js"/]
<script>
// 随机展示背景图片 
var imgSrcs = [ "[@common.ctx/]/base/login/img/1.jpg",
		"[@common.ctx/]/base/login/img/3.jpg" ];

var randomBgIndex = parseInt(Math.random() * (imgSrcs.length));
$(document).ready(
 	function() {
		$(".login-page").css("background-image",
			"url(" + imgSrcs[randomBgIndex] + ")"); 
 });	
		
/* 	function() {
		$(".preview lazy").attr("data-src", imgSrcs[randomBgIndex]);
		$(".preview lazy").attr("src", imgSrcs[randomBgIndex]);
		
		//渐进式加载背景图
		  (function(){
		    new Progressive({
		      el: '#app',
		      lazyClass: 'lazy',
		      removePreview: true,
		      scale: true
		    }).fire()
		  })()
}); */

	

	  
</script>

</html>